<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" :show-indicators="false">
      <van-swipe-item v-for="(news, index) in swiperData.result" :key="index">
        <router-link :to="`newsdetail?id=${news.id}`">
          <img :src="/pic&video/+news.pic" />
          <span>{{ news.title }}</span>
        </router-link>
      </van-swipe-item>
    </van-swipe>

    <!-- 新闻列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我也是有底线的"
      @load="onLoad()"
    >
      <!-- 循环显示新闻 -->
      <van-row v-for="(news, index) in newsData" :key="index">
        <!-- 跳转指定页面 -->
        <router-link :to="`newsdetail?id=${news.id}`">
          <div>
            <!-- 新闻标题 -->
            <div class="newsTitle">
              {{ news.title }}
            </div>
            <!-- 新闻日期 -->
            <div class="newsDate">
              {{ news.date }}
            </div>
            <!-- 分割线 -->
            <van-divider />
          </div>
        </router-link>
      </van-row>
    </van-list>
  </div>
</template>

<style lang="less" scoped>
// 轮播图样式
.van-swipe {
  img {
    width: 100%;
    height: 15em;
  }
  span {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20px;
    font-weight: 700;
    margin: 0 15px;
    padding: 15px 0 5px ;
  }  
}
// 新闻标题
.newsTitle{
  font-size: 18px;
  padding: 15px 0 5px;
  margin: 0 15px;
}
// 新闻日期
.newsDate{
  color: #888;
  line-height: 28px;
  font-size: 13px;
  margin: 0 15px;
  text-align: left;
}
</style>

<script>
export default {
  data() {
    return {
      swiperData: [],
      newsData: [],
      loading: false,
      finished: false,
      offset: 100,
      page: 0,
    }
  },
  mounted() {
    this.getSwiper()
  },

  methods: {
    // 加载轮播图
    getSwiper() {
      this.axios.get("newsfour").then((res) => {
        this.swiperData = res.data
      })
    },

    // 获取新闻
    getNews() {
      this.axios.get(`news?page=${this.page}`).then((res) => {
        console.log(res.data.results.length)
        if (res.data.results.length == 0) {
          this.finished = true
          return
        }
        this.newsData.push(...res.data.results)
        this.loading = false
      })
    },
    // 控制上拉
    onLoad() {
      this.loading = true
      this.page++
      this.getNews()
    },
  },
}
</script>
